<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    @click="add"
                    v-auths="['maintenanceLangCountryEdit3']"
                ></el-button>
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    :disabled="selection.length == 0"
                    @click="batchDel"
                    v-auths="['maintenanceLangCountryBatchDel']"
                ></el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-input
                        v-model="state.search.keywords"
                        :placeholder="$t('关键词')"
                        clearable
                    ></el-input>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        @click="handleSearch"
                    ></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <kitegoTable
                ref="kitegoTableRef"
                :columns="columns"
                :apiObj="state.list.apiObj"
                :init-param="state.search"
                row-key="id"
                @selection-change="selectionChange"
                stripe
            >
                <template #options="scope">
                    <el-button text plain size="small" @click="tableShow(scope.row)">{{
                        $t('查看')
                    }}</el-button>
                    <el-button
                        text
                        type="primary"
                        plain
                        size="small"
                        @click="tableEdit(scope.row)"
                        v-auths="['maintenanceLangCountryEdit1']"
                        >{{ $t('编辑') }}
                    </el-button>
                    <el-popconfirm
                        title="确定删除吗？"
                        @confirm="tableDel(scope.row, scope.$index)"
                    >
                        <template #reference>
                            <el-button
                                text
                                plain
                                type="danger"
                                size="small"
                                v-auths="['maintenanceLangCountryEdit2']"
                                >{{ $t('删除') }}
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </kitegoTable>
        </el-main>
    </el-container>

    <save-dialog
        v-if="state.dialog.save"
        ref="saveDialogRef"
        @success="handleSaveSuccess"
        @closed="state.dialog.save = false"
    ></save-dialog>

    <el-drawer
        v-model="state.dialog.info"
        :size="800"
        :title="$t('详细')"
        direction="rtl"
        destroy-on-close
    >
        <info ref="infoDialogRef"></info>
    </el-drawer>
</template>

<script lang="ts" setup>
import saveDialog from './save.vue'
import info from './info.vue'
import { ref } from 'vue'
import maintenance from '@/api/modules/maintenance.ts'
import feedback from '@/utils/feedback.ts'
import { useI18n } from 'vue-i18n'
import type { ColumnProps } from '@/components/kitegoTable/type.ts'
import type { LangCountryModel } from '@/views/maintenance/langSetting/langCountry/type.ts'
const { t } = useI18n()

defineOptions({ name: '地区列表' })

const kitegoTableRef = ref()
const saveDialogRef = ref()
const infoDialogRef = ref()

interface SelectionModel {
    id: number
}
const selection = ref<SelectionModel[]>([])

const state = reactive({
    dialog: {
        save: false,
        info: false
    },
    list: {
        apiObj: maintenance.langCountry.list
    },
    search: {
        keywords: null
    }
})

// 表格配置项
const columns = reactive<ColumnProps[]>([
    { type: 'selection' },
    { prop: 'id', label: '地区ID', width: 100 },
    { prop: 'sort', label: '排序值', width: 100 },
    { prop: 'name', label: '地区名称' },
    { prop: 'code', label: '浏览器标识', width: 150 },
    { prop: 'langId', label: '绑定语言ID', width: 150 },
    { prop: 'createTime', label: '加入时间', width: 180 },
    { prop: 'options', label: '操作', fixed: 'right', align: 'right', width: 300 }
])

function handleSearch() {
    kitegoTableRef.value!.searchParam = state.search
    kitegoTableRef.value?.search()
}

// 窗口新增
function add() {
    state.dialog.save = true
    nextTick(() => {
        saveDialogRef.value!.open()
    })
}

// 窗口编辑
function tableEdit(row: LangCountryModel) {
    state.dialog.save = true
    nextTick(() => {
        saveDialogRef.value!.open('edit')
        saveDialogRef.value!.setData(row)
    })
}

// 查看
function tableShow(row: LangCountryModel) {
    state.dialog.info = true
    nextTick(() => {
        infoDialogRef.value!.setData(row)
    })
}

// 删除明细
async function tableDel(row: LangCountryModel, index: number) {
    row.isDelete = 1
    const res = await maintenance.langCountry.edit.post(row, { await: 1 })
    if (res) {
        kitegoTableRef.value!.removeIndex(index)
        feedback.success(t('删除成功'))
    }
}

// 批量删除
async function batchDel() {
    await feedback.confirm(`确定删除选中的 ${selection.value.length} 项吗？`, t('提示'), {
        type: 'warning',
        confirmButtonText: t('删除'),
        confirmButtonClass: 'el-button--danger'
    })

    const ids = selection.value.map((v) => v.id)

    feedback.loading()
    const reqData = {
        ids: ids
    }
    const res = await maintenance.langCountry.batchDel.post(reqData, { await: 1 })
    if (res) {
        kitegoTableRef.value!.removeKeys(ids)
        feedback.success(t('操作成功'))
    }
    feedback.closeLoading()
}

// 表格选择后回调事件
function selectionChange(val: SelectionModel[]) {
    selection.value = val
}

// 本地更新数据
type Mode = 'add' | 'edit' | 'del'
function handleSaveSuccess(data: LangCountryModel, mode: Mode) {
    console.log(data, 'data')
    console.log(mode, 'mode')
    handleSearch()
}
</script>

<style></style>
